@import '../../styles/variables.scss';

.login-container {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;

  .login-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    
    .bg-overlay {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="%23ffffff" fill-opacity="0.1" d="M0,96L48,112C96,128,192,160,288,186.7C384,213,480,235,576,213.3C672,192,768,128,864,128C960,128,1056,192,1152,197.3C1248,203,1344,149,1392,122.7L1440,96L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>') no-repeat bottom;
      background-size: cover;
    }
  }

  .login-content {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 440px;
    padding: 20px;
  }

  .login-card {
    background: #fff;
    border-radius: 16px;
    padding: 40px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);

    .login-header {
      text-align: center;
      margin-bottom: 32px;

      h1 {
        font-size: 28px;
        font-weight: 600;
        color: #1a1a1a;
        margin-bottom: 8px;
      }

      p {
        font-size: 14px;
        color: #8c8c8c;
        margin: 0;
      }
    }

    .ant-tabs {
      .ant-tabs-nav {
        margin-bottom: 24px;
      }

      .ant-tabs-tab {
        font-size: 16px;
        padding: 12px 20px;
      }
    }

    .login-options {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 0;

      .forgot-link {
        color: #667eea;
        text-decoration: none;
        transition: color 0.3s;

        &:hover {
          color: #764ba2;
        }
      }
    }

    .code-input-wrapper {
      display: flex;
      gap: 10px;

      .ant-input {
        flex: 1;
      }

      button {
        flex-shrink: 0;
        min-width: 110px;
      }
    }

    .ant-btn-primary {
      height: 44px;
      font-size: 16px;
      font-weight: 500;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      border: none;
      border-radius: 8px;
      margin-top: 8px;

      &:hover {
        background: linear-gradient(135deg, #5568d3 0%, #6a3f8f 100%);
      }
    }

    .login-footer {
      text-align: center;
      margin-top: 24px;
      padding-top: 24px;
      border-top: 1px solid #f0f0f0;
      color: #8c8c8c;

      .register-link {
        color: #667eea;
        font-weight: 500;
        margin-left: 8px;
        text-decoration: none;
        transition: color 0.3s;

        &:hover {
          color: #764ba2;
        }
      }
    }

    .third-party-login {
      margin-top: 24px;

      .divider {
        position: relative;
        text-align: center;
        margin: 24px 0;

        &::before {
          content: '';
          position: absolute;
          top: 50%;
          left: 0;
          right: 0;
          height: 1px;
          background: #f0f0f0;
        }

        span {
          position: relative;
          background: #fff;
          padding: 0 16px;
          color: #8c8c8c;
          font-size: 13px;
        }
      }
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .login-container {
    .login-card {
      padding: 30px 24px;
    }
  }
}

